<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			.content,.content1,.content2{height: 100px;}
		</style>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	</head>
	<body>
		<div class='content'>lksdjfklsdf</div>
		<div class='content1'>2222222</div>
		<div class='content2'>33333333</div>
		
		<script type="text/javascript">
			$(function(){
				let handle = loading('.content1')
				setTimeout(function(){
					handle.close()
				},2000)
			})			
			
			function loading(ele,size=70){
				const l = console.error
				ele = $(ele)
				if(ele.length != 1) return l('找不到唯一容器元素')
				let html = `
					<div id="mymask" style="position: absolute;width: 100%;height: 100%;top: 0;background-color: white;display: flex;align-items: center;justify-content: center;">
						<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="${size}px" height="${size}px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
							<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
								<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
							</path>
						</svg>
					</div>
				`
				if(ele.css('position') != 'static' && ele.css('position') != 'relative') return l('loading容器元素position属性不合法')
				ele.css('position','relative')
				
				ele.append(html)
				return {close:function(){$('#mymask')[0].remove()}}
			}
		</script>
	</body>
</html>
